<script lang="ts" setup>
import { ref, watch } from 'vue';

interface Props {
  modelValue?: string;
  disabled?: boolean;
  placeholder?: string;
  maxLength?: number;
  required?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  disabled: false,
  placeholder: '添加上传留言（可选）...',
  maxLength: 500,
  required: false,
});

const emit = defineEmits<{
  'update:modelValue': [value: string];
}>();

const message = ref(props.modelValue);

// 监听modelValue变化
watch(
  () => props.modelValue,
  (newValue) => {
    message.value = newValue;
  },
);

// 监听message变化并发出事件
watch(message, (newValue) => {
  emit('update:modelValue', newValue);
});

// 计算字符数
const characterCount = ref(0);

watch(
  message,
  (newValue) => {
    characterCount.value = newValue.length;
  },
  { immediate: true },
);

// 是否超出长度限制
const isOverLimit = () => {
  return characterCount.value > props.maxLength;
};

// 快捷留言模板
const quickMessages = [
  '请查收文件',
  '重要文档，请及时处理',
  '临时文件，可删除',
  '备份文件',
  '分享给团队查看',
];

// 插入快捷留言
const insertQuickMessage = (quickMessage: string) => {
  if (message.value && !message.value.endsWith(' ')) {
    message.value += ' ';
  }
  message.value += quickMessage;
};

// 清空留言
const clearMessage = () => {
  message.value = '';
};
</script>

<template>
  <div class="border-border bg-card rounded-lg border p-6 shadow-sm">
    <div class="mb-4 flex items-center justify-between">
      <h3 class="text-lg font-semibold">添加留言</h3>
      <span
        class="text-sm"
        :class="isOverLimit() ? 'text-red-600' : 'text-muted-foreground'"
      >
        {{ characterCount }} / {{ maxLength }}
      </span>
    </div>

    <!-- 留言输入框 -->
    <div class="space-y-3">
      <Field>
        <Label>
          上传留言 <span v-if="required" class="text-red-500">*</span>
        </Label>
        <TextArea
          v-model="message"
          :placeholder="placeholder"
          :disabled="disabled"
          :maxlength="maxLength"
          :required="required"
          resize="vertical"
          auto-resize
          class="min-h-20 w-full"
          :class="{ 'border-red-500': isOverLimit() }"
        />
        <div v-if="isOverLimit()" class="mt-1 text-sm text-red-600">
          留言内容超出长度限制
        </div>
      </Field>

      <!-- 快捷留言 -->
      <div>
        <Label class="mb-2 block text-sm">快捷留言</Label>
        <div class="flex flex-wrap gap-2">
          <Button
            v-for="quickMsg in quickMessages"
            :key="quickMsg"
            size="small"
            appearance="subtle"
            @click="insertQuickMessage(quickMsg)"
            :disabled="disabled"
          >
            {{ quickMsg }}
          </Button>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="flex justify-end space-x-2">
        <Button
          v-if="message.length > 0"
          size="small"
          appearance="subtle"
          @click="clearMessage"
          :disabled="disabled"
        >
          清空
        </Button>
      </div>
    </div>
  </div>
</template>
